import React, { useEffect, useState } from 'react';
import { getAdminList,addAdmin, updateAdmin, delAdmin } from '../../api/user';
import { Table,Button, Tag, Drawer, Input, Select, Tree, message,Modal, Popconfirm    } from 'antd';
// 如果 router 中有一个 index 那么导入的就是 index.js
import menus from '../../router'
import { useTreeData } from '../../utils/hooks';



const Admin = () => {

  const list = useTreeData(menus)

  const [adminList,setAdminList] = useState()

  useEffect(()=>{
    getAdminList().then(res => {
      console.log(res.data);
      setAdminList(res.data)
    })
  }, [])

  // ---------------------- 添加管理员
    // 打开抽屉
    const [ open, setOpen ] = useState(false)
    // 关闭抽屉
    const onClose = () => {
      setOpen(false);
    };
    // 定义管理员账号密码角色和权限的变量
    const [adminname,setAdminName] = useState()
    const [password,setPassword] = useState()
    const [role,setRole] = useState(1)
    const [checkedKeys,setCheckedKeys] = useState()

  // ---------------------- 添加管理员

  // ---------------------- 编辑管理员
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);

    // console.log('修改：', adminname,password,role,checkedKeys);
    updateAdmin({adminname,password,role,checkedKeys}).then(res => {
      // console.log('11111111111111111111',res);
      updateAdminList(res)
    })

  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // ---------------------- 编辑管理员

  function updateAdminList(res){
    if(res.code === '200'){
      message.success(res.message)

      getAdminList().then(res => {
        setAdminList(res.data)
      })

    }else {
      message.error(res.message)
    }


    // 关闭抽屉
    setOpen(false)
    setIsModalOpen(false)

    setAdminName('')
    setPassword('')
    setRole(1)
    setCheckedKeys([])
  }


  return (
    <div>
      <h3>管理员列表 <Button onClick={()=>{
        setOpen(true)
      }}>添加管理员</Button></h3>

      <Table rowKey={'adminid'} dataSource={adminList} scroll={{
        y: 480
      }}>
        <Table.Column title={'序号'} render={(t,r,i)=>{
          return (<span>{i + 1}</span>)
        }}></Table.Column>
        <Table.Column title={'管理员名称'} dataIndex={'adminname'}></Table.Column>
        <Table.Column title={'管理员权限'} dataIndex={'role'} render={(t)=>{
          return t === 1 ? (<Tag color="green">管理员</Tag>) : (<Tag color="orange">超级管理员</Tag>)
        }}></Table.Column>
        <Table.Column title={'操作'} render={(t,r,i)=>{
          return (<>
            <Button onClick={()=>{
              setIsModalOpen(true)

              // console.log('1111111111', r);
              setAdminName(r.adminname)
              setPassword('')
              setRole(r.role)
              setCheckedKeys(r.checkedKeys)
            }}>编辑</Button>
          <Popconfirm
              title="你确定要删除吗？"
              onConfirm={()=>{
                delAdmin({adminid: r.adminid}).then(res => {
                    updateAdminList(res)
                })
              }}
              okText="确定"
              cancelText="取消"
            >
              <Button>删除</Button>
            </Popconfirm>

          </>)
        }}></Table.Column>
      </Table>

      {/* 添加管理员 */}
      <Drawer title="添加管理员" placement="right" onClose={onClose} open={open}>
        <Input value={adminname} onChange={e => setAdminName(e.target.value)} placeholder='请输入管理员账号' />
        <Input.Password value={password} onChange={e => setPassword(e.target.value)} style={{margin: '16px 0'}} placeholder='请输入管理员密码' />
        <Select value={role} onChange={e => setRole(e)} style={{width: '100%'}} placeholder='请选择管理员类型'>
          <Select.Option value={1}> 管理员 </Select.Option>
          <Select.Option value={2}> 超级管理员 </Select.Option>
        </Select>

        <Tree
          checkable
          treeData={list}
          defaultExpandAll
          checkedKeys={checkedKeys}
          onCheck={(checkedKeys)=>{
            console.log(checkedKeys);
            // 获取到选中的权限
            setCheckedKeys(checkedKeys)
          }}
        />

        <Button onClick={()=>{
          // 获取到需要添加管理员的信息，然后传递到服务器
          // console.log(adminname,password,role,checkedKeys);

          addAdmin({
            adminname,
            password,
            role,
            checkedKeys
          }).then(res => {
            // console.log(res);

            updateAdminList(res)
          })

        }}>添加</Button>
      </Drawer>
      {/* 添加管理员 */}


      {/* 编辑管理员 */}
      <Modal
      title="编辑管理员"
      footer={(<Button onClick={handleOk}>确认</Button>)}
      onCancel={handleCancel}
      afterClose={()=>{
        // 当对话框关闭时的回调
        setAdminName('')
        setPassword('')
        setRole(1)
        setCheckedKeys([])
      }}
      open={isModalOpen}>


      <Input value={adminname} onChange={e => setAdminName(e.target.value)} placeholder='请输入管理员账号' />
      <Input.Password value={password} onChange={e => setPassword(e.target.value)} style={{margin: '16px 0'}} placeholder='请输入管理员密码' />
        <Select value={role} onChange={e => setRole(e)} style={{width: '100%'}} placeholder='请选择管理员类型'>
          <Select.Option value={1}> 管理员 </Select.Option>
          <Select.Option value={2}> 超级管理员 </Select.Option>
        </Select>

        <Tree
          checkable
          treeData={list}
          defaultExpandAll
          checkedKeys={checkedKeys}
          onCheck={(checkedKeys)=>{
            console.log(checkedKeys);
            // 获取到选中的权限
            setCheckedKeys(checkedKeys)
          }}
        />

      </Modal>
      {/* 编辑管理员 */}

    </div>
  );
};

export default Admin;
